<template>
    <div class="act">
        <div class="page-title">选择参加活动商品</div>
        <div class="checkBox">
            <el-select v-model="shopNewValue" filterable placeholder="店铺名称" @change="selectNewShop(0)">
                <el-option
                        v-for="item in shopOption"
                        :key="item.userId"
                        :label="item.name"
                        :value="item.userId">
                </el-option>
            </el-select>
            <el-select v-model="goodsNewValue" filterable placeholder="商品名称">
                <el-option
                        v-for="item in goodsNewOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" @click="setActivity">确认</el-button>
        </div>
        <el-table
                v-loading="listLoading"
                :data="newActivityList"
                size="mini"
                style="width: 100%;margin-top: 48px">
            <el-table-column
                    align="center"
                    prop="id"
                    label="序号"
                    width="80">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="shopName"
                    label="店铺名称"
                    width="250">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="name"
                    label="商品名称"
                    width="250">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="unit"
                    label="单位"
                    width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" @click="lookSetting">设置活动方式</el-button>
                    <el-button size="mini" type="primary" @click="commitActive">提交活动</el-button>
                    <el-button size="mini" type="danger" @click="deleteSetting">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="actRecord">历史活动管理</div>
        <div class="checkBox">
            <el-select clearable v-model="shopOldValue" filterable placeholder="店铺名称" @change="selectNewShop(1)">
                <el-option
                        v-for="item in shopOption"
                        :key="item.userId"
                        :label="item.name"
                        :value="item.userId">
                </el-option>
            </el-select>
            <el-select clearable v-model="goodsOldValue" filterable placeholder="商品名称">
                <el-option
                        v-for="item in goodsOldOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="searchActivity">查询</el-button>
<!--            <el-button type="primary" icon="el-icon-download" :loading="downloadLoading">导出</el-button>-->
        </div>
        <div style="height: 400px">
            <el-table
                    :data="oldActivityList"
                    style="width: 100%;margin-top: 48px"
                    size="small"
                    @selection-change="handleSelectionChange"
                    v-loading="listLoading"
            >
                <!--                <el-table-column-->
                <!--                        type="selection"-->
                <!--                        width="50">-->
                <!--                </el-table-column>-->
                <el-table-column
                        align="center"
                        prop="id"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="shopName"
                        label="店铺名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="活动名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="firstGoodsQuantity"
                        label="购买数量"
                        width="70">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="stock"
                        label="库存"
                        width="80">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="number"
                        label="主产品个人限购数量 "
                        width="70">
                </el-table-column>

                <el-table-column align="center" label="开始时间" width="150">
                    <template slot-scope="scope">
                        <span>{{parseTime(scope.row.start)}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="结束时间" width="150">
                    <template slot-scope="scope">
                        <span>{{parseTime(scope.row.end)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="lookDetail(scope.row)">详情</el-button>
                        <el-button v-if="canUpdate" size="mini" type="warning" @click="handleUpdate(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="warning" v-if="!scope.row.status" @click="changeBind(scope.row.id,scope.$index)">解绑</el-button>
                        <el-button size="mini" type="info" v-if="scope.row.status">结束</el-button>
                        <el-button v-if="canDelete" size="mini" type="danger" @click="handleDelete(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page.sync="listQuery.page"
                :page-size="listQuery.limit"
                :page-sizes="[10,20,30, 50]"
                layout="total, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog title="活动详情" :visible.sync="dialogDetail">
            <el-row :gutter="20">
                <el-col :span="12">店铺名称：</el-col>
                <el-col :span="12">{{dialogItem.shopName}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">商品名称：</el-col>
                <el-col :span="12">{{dialogItem.goodsName}}</el-col>
            </el-row>
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="12">单位：</el-col>-->
<!--                <el-col :span="12">{{dialogItem.unit}}</el-col>-->
<!--            </el-row>-->
            <el-row :gutter="20">
                <el-col :span="12">主产品购买数量：</el-col>
                <el-col :span="12">{{dialogItem.firstGoodsQuantity}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">抽奖触发数量：</el-col>
                <el-col :span="12">{{dialogItem.quantity}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">选择活动方式：</el-col>
                <el-col :span="12">{{dialogItem.mode?activityOption[dialogItem.mode].label:''}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">参加活动条件：</el-col>
                <el-col :span="12">{{dialogItem.name}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">主产品库存数量：</el-col>
                <el-col :span="12">{{dialogItem.stock}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">个人限购数量：</el-col>
                <el-col :span="12">{{dialogItem.number}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">关联活动产品：</el-col>
                <el-col :span="12">{{bindGoodsName}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">关联产品数量：</el-col>
                <el-col :span="12">{{dialogItem.bindGoodsQuantity}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">状态：</el-col>
                <el-col :span="12">{{dialogItem.status?'关闭':'开启'}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">购买开始时间：</el-col>
                <el-col :span="12">{{dialogItem.start}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">购买结束时间：</el-col>
                <el-col :span="12">{{dialogItem.end}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">关联抽奖链接：</el-col>
                <el-col :span="12">{{bindLotteryName}}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">禁购级别：</el-col>
                <el-col :span="12">{{dialogItem.level}}</el-col>
            </el-row>
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="12">抽奖开始时间：</el-col>-->
<!--                <el-col :span="12">2020-10-25 10:00:00</el-col>-->
<!--            </el-row>-->
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="12">抽奖关闭时间：</el-col>-->
<!--                <el-col :span="12">2020-10-25 10:00:00</el-col>-->
<!--            </el-row>-->
        </el-dialog>
        <el-dialog :visible.sync="dialogSetting">
            <el-form label-position="left" label-width="120px" size="mini">
                <el-form-item label="选择活动方式">
                    <el-select v-model="temp.mode" size="mini" placeholder="请选择" style="width: 210px"
                               @change="changeMode">
                        <el-option
                                v-for="item in activityOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设置活动规则">
                </el-form-item>
                <el-form-item label="参加活动条件" style="padding-left: 30px">
                    <el-input style="width: 210px" v-model="temp.name"></el-input>
                </el-form-item>
                <el-form-item label="主产品购买数量" style="padding-left: 30px" v-if="temp.mode!==0">
                    <el-input style="width: 210px" v-model="temp.firstGoodsQuantity"></el-input>
                </el-form-item>
                <el-form-item label="抽奖触发数量" style="padding-left: 30px" v-if="temp.mode===0||temp.mode==1">
                    <el-input style="width: 210px" v-model="temp.quantity"></el-input>
                </el-form-item>
                <el-form-item label="主产品库存数量" style="padding-left: 30px">
                    <el-input-number style="width: 210px" v-model="temp.stock"></el-input-number>
                </el-form-item>
                <el-form-item label="个人限购数量" style="padding-left: 30px">
                    <el-input style="width: 210px" v-model="temp.number"></el-input>
                </el-form-item>

                <el-form-item label="关联活动产品" style="padding-left: 30px" v-if="temp.mode!==0">
                    <el-select filterable v-model="temp.bindGoodsId" size="mini" placeholder="请选择" style="width: 210px">
                        <el-option
                                v-for="item in goodsList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联产品数量" style="padding-left: 30px" v-if="temp.mode!==0">
                    <el-input style="width: 210px" v-model="temp.bindGoodsQuantity"></el-input>
                </el-form-item>
                <el-form-item label="状态" style="padding-left: 30px">
                    <el-radio v-model="temp.status" label="0">开启</el-radio>
                    <el-radio v-model="temp.status" label="1">关闭</el-radio>
                </el-form-item>
                <el-form-item label="购买开始时间" style="padding-left: 30px">
                    <el-date-picker
                            v-model="temp.start"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"
                            style="width: 210px"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="购买结束时间" style="padding-left: 30px">
                    <el-date-picker
                            v-model="temp.end"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"
                            style="width: 210px"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="关联抽奖链接" style="padding-left: 30px" v-if="temp.mode!==2&&temp.mode!==3">
                    <el-select v-model="temp.bindLotteryId" size="mini" placeholder="请选择" style="width: 210px">
                        <el-option
                                v-for="item in lotteryList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="禁购级别" style="padding-left: 30px">
                    <el-select v-model="temp.level" multiple size="mini" placeholder="请选择" style="width: 210px">
                        <el-option
                                v-for="item in levelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--                <el-form-item label="抽奖开启时间" style="padding-left: 30px">-->
                <!--                    <el-date-picker-->
                <!--                            v-model="value1"-->
                <!--                            type="datetime"-->
                <!--                            placeholder="选择日期时间"-->
                <!--                            style="width: 210px"-->
                <!--                    >-->
                <!--                    </el-date-picker>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="抽奖关闭时间" style="padding-left: 30px">-->
                <!--                    <el-date-picker-->
                <!--                            v-model="value1"-->
                <!--                            type="datetime"-->
                <!--                            placeholder="选择日期时间"-->
                <!--                            style="width: 210px"-->
                <!--                    >-->
                <!--                    </el-date-picker>-->
                <!--                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="dialogFlag=='create'" type="primary" style="margin-right: 60px" size="mini" @click="checkSetting()">确认</el-button>
                <el-button v-if="dialogFlag=='update'" type="primary" style="margin-right: 60px" size="mini" @click="updateData()">确认</el-button>
                <el-button size="mini" @click="clearSetting">取消</el-button>
            </div>
        </el-dialog>
    </div>

</template>


<script>
    import {list, save, update, remove, info, getGoodsByShop, setActivityGoods,setChangeBind} from '@/api/mall_act'
    import waves from '@/directive/waves' // 水波纹指令
    import {parseTime} from '@/utils'
    import {mapGetters} from 'vuex'
    import {hasAuth} from '@/utils/auth'

    export default {
        name: 'test',
        directives: {
            waves
        },
        data() {
            return {
                value: '',
                multipleSelection: [],
                dialogDetail: false,
                dialogSetting: false,
                dialogFlag: null,
                value1: '',


                listQuery: {
                    page: 1,
                    limit: 7,
                    order: 'id desc',
                    name: null,
                    goodsId: null,
                    bindGoodsId: null,
                    bindGoodsQuantity: null,
                    skuId: null,
                    level: null,
                    number: null,
                    quantity: null,
                    stock: null,
                    start: null,
                    starts: null,
                    end: null,
                    ends: null,
                    status: null,
                    userId:null
                },
                listLoading: true,
                shopOption: [],
                shopNewValue: null,
                shopOldValue: null,
                goodsNewOption: [],
                goodsNewValue: null,
                goodsOldOption: [],
                goodsOldValue: null,
                newActivityList: [],
                activityOption: [
                    {value: 0, label: '抽奖'},
                    {value: 1, label: '抽奖+捆绑'},
                    {value: 2, label: '捆绑'},
                    {value: 3, label: '限购'},
                ],
                goodsList: [],
                lotteryList: [],
                temp: {
                    mode: null,
                    name: null,
                    firstGoodsQuantity: null,
                    stock: null,
                    number: null,
                    bindGoodsId: null,
                    bindGoodsQuantity: null,
                    start: null,
                    end: null,
                    bindLotteryId: null,
                    goodsId: null,
                    status: '0',
                    level: null,
                    quantity: null,
                    goodsName:null
                },
                levelList: [],
                oldActivityList: [],
                total: null,
                downloadLoading:false,
                dialogItem:{
                    bindGoodsId: null,
                    bindGoodsQuantity: null,
                    bindLotteryId: null,
                    end: null,
                    ends: null,
                    firstGoodsQuantity: null,
                    goodsId: null,
                    goodsName: null,
                    id: null,
                    level: null,
                    mode: 0,
                    name: null,
                    number: null,
                    open: null,
                    quantity: null,
                    reward: null,
                    shopName: null,
                    skuId: null,
                    start: null,
                    starts: null,
                    status: null,
                    stock: null,
                },
                bindGoodsName:null,
                bindLotteryName:null,

            }
        },
        created() {
            if (this.$route.query.goodsId) {
                this.listQuery.goodsId = this.$route.query.goodsId
            }
            this.getList()
        },
        computed: {
            ...mapGetters([
                'perms'
            ]),
            canSave() {
                return hasAuth(this.perms, 'mall:act:save')
            },
            canDelete() {
                return hasAuth(this.perms, 'mall:act:delete')
            },
            canUpdate() {
                return hasAuth(this.perms, 'mall:act:update')
            },
            canList() {
                return hasAuth(this.perms, 'mall:act:list')
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            parseTime(time) {
                return parseTime(time)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleUpdate(id){
                info(id).then(res => {
                    this.temp=res.data
                    if (this.temp.level != null && this.temp.level != ''){
                        var arr = this.temp.level.split("_");
                        this.temp.level = arr;
                    }
                    this.dialogFlag ='update'
                    this.dialogSetting = true
                })
            },
            lookDetail(item) {
                console.log(item);
                this.dialogItem = item
                if (item.bindGoodsId){
                    this.goodsList.forEach(cell=>{
                        if (cell.id==item.bindGoodsId){
                            this.bindGoodsName = cell.name
                        }
                    })
                }else {
                    this.bindGoodsName = null
                }
                if (item.bindLotteryId){
                    this.lotteryList.forEach(cell=>{
                        if (cell.id==item.bindLotteryId){
                            this.bindLotteryName = cell.name
                        }
                    })
                }else {
                    this.bindLotteryName = null
                }
                if (item.goodsId){
                    this.goodsList.forEach(cell=>{
                        if (cell.id == item.goodsId){
                            item.goodsName = cell.name
                        }
                    })
                }
                this.dialogDetail = true
            },
            lookSetting() {
                this.dialogSetting = true
                this.dialogFlag='create'
            },
            handleDelete(scope) {
                // this.beforeFormShow(scope.row)
                // this.temp = Object.assign({}, row) // copy obj
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // })
                    this.deleteData(scope.$index)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    })
                })
            },
            deleteData(index) {
                // const ids = [this.temp.id]
                const ids = [this.oldActivityList[index].id]
                remove({ids: ids}).then(res => {
                    // 从当前队列中移除
                    this.oldActivityList.splice(index, 1)
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            },
            searchActivity() {
                this.listQuery.goodsId = this.goodsOldValue
                this.listQuery.userId = this.shopOldValue
                this.listQuery.page = 1
                console.log(this.listQuery);
                this.getList()
            },
            getList() {
                this.listLoading = true
                if (this.listQuery.goodsId == '') {
                    this.listQuery.goodsId = null
                }
                list(this.listQuery).then(res => {
                    console.log(res);
                    this.oldActivityList = res.data.list
                    this.total = res.data.total
                    this.shopOption = res.extra.shops
                    this.shopOption.unshift({name: '社集优选自营店', userId: 0})
                    this.goodsList = res.extra.goodsList
                    this.lotteryList = res.extra.lotteryList
                    this.levelList = res.extra.levelList
                    this.listLoading = false
                })
            },
            selectNewShop(ways) {
                let value = ways?this.shopOldValue:this.shopNewValue
                getGoodsByShop(value).then(res => {
                    console.log(res);
                    if (ways) {
                        this.goodsOldOption = []
                        this.goodsOldValue = null
                        this.goodsOldOption = res.data
                    } else {
                        this.goodsNewOption = []
                        this.goodsNewValue = null
                        this.goodsNewOption = res.data
                    }
                })
            },
            setActivity() {
                if (!this.goodsNewValue) {
                    this.$message.error('请选择商品!');
                    return
                }
                this.listLoading = true
                setActivityGoods(this.goodsNewValue).then(res => {
                    console.log(res);
                    this.newActivityList = []
                    this.newActivityList.unshift(res.data)
                    this.temp = {
                        mode: null,
                        name: null,
                        firstGoodsQuantity: null,
                        stock: null,
                        number: null,
                        bindGoodsId: null,
                        bindGoodsQuantity: null,
                        start: null,
                        end: null,
                        bindLotteryId: null,
                        goodsId: null,
                        status: '0',
                        level: null,
                        quantity: null,
                        goodsName:null,
                    }
                    this.goodsNewOption.forEach(item=>{
                        if (item.id == this.goodsNewValue){
                            this.temp.goodsName = item.name
                        }
                    })
                    this.listLoading = false
                })
            },
            clearSetting() {
                this.dialogSetting = false
                this.temp = {
                    mode: null,
                    name: null,
                    firstGoodsQuantity: null,
                    stock: null,
                    number: null,
                    bindGoodsId: null,
                    bindGoodsQuantity: null,
                    start: null,
                    end: null,
                    bindLotteryId: null,
                    goodsId: null,
                    status: '0',
                    level: null,
                    quantity: null,
                    goodsName:null,
                }
            },
            checkSetting() {
                this.dialogSetting = false
            },
            updateData(){
                if (this.temp.level){
                    this.temp.level = this.temp.level.join('_')
                }
                console.log(this.temp.goodsId)
                update(this.temp).then((res) => {
                    for (const v of this.oldActivityList) {
                        if (v.id === this.temp.id) {
                            if (this.temp.id == res.data.id) {
                                this.temp = res.data
                            }
                            const index = this.oldActivityList.indexOf(v)
                            this.oldActivityList.splice(index, 1, this.temp)
                            break
                        }
                    }
                    this.dialogSetting=false
                    this.$notify({
                        title: '成功',
                        message: '更新成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            },
            changeMode(index) {
                var goodsId = null;
                var id = null;
                if (this.temp.goodsId){
                    goodsId = this.temp.goodsId
                }
                if (this.temp.id){
                    id = this.temp.id
                }
                this.temp= {}
                this.temp.mode=index
                if (goodsId){
                    this.temp.goodsId = goodsId;
                }
                if (id){
                    this.temp.id = id;
                }
            },
            changeBind(id,index){
                console.log(index);
                this.$confirm('此操作将永久解绑该活动, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    setChangeBind(id).then(res => {
                        this.$message.success('解绑成功！')
                        this.oldActivityList[index].status = 1
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消解绑'
                    })
                })
            },
            deleteSetting() {
                this.newActivityList = []
            },
            commitActive() {
                this.temp.goodsId = this.goodsNewValue
                if (this.temp.level){
                    this.temp.level = this.temp.level.join('_')
                }
                console.log(this.temp);
                save(this.temp).then(res => {
                    console.log(res);
                    this.$message.success('提交成功！')
                    this.newActivityList = []
                })

            },
            handleDownload() {
                this.downloadLoading = true
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = [
                        '序号',
                        '活动名称',
                        '产品ID',
                        '绑定产品ID',
                        '绑定数量',
                        '不可购买级别',
                        '限购数量',
                        '优惠卷奖励',
                        '现金卷奖励',
                        '区域奖励省_市_县',
                        '管理费',
                        '活动库存',
                        '是否立即返利',
                        '是否立即返利',
                        '是否立即返利',
                        '是否立即返利',
                        '状态',
                        '开始时间',
                        '结束时间'
                    ]
                    const filterVal = [
                        'id',
                        'name',
                        'goodsId'
                        , 'bindGoodsId'
                        , 'bindGoodsQuantity'
                        , 'level'
                        , 'number'
                        , 'couponReward'
                        , 'cashReward'
                        , 'areaReward'
                        , 'managerReward'
                        , 'stock'
                        ,
                        'couponType'
                        ,
                        'cashType'
                        ,
                        'areaType'
                        ,
                        'managerType'
                        ,
                        'status'
                        ,
                        'start'
                        ,
                        'end'
                    ]
                    const data = this.formatJson(filterVal, this.list)
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: 'table-list'
                    })
                    this.downloadLoading = false
                })
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .act {
        padding: 48px 28px;

        .page-title {
            font-size: 22px;
            color: #333333;
        }
        .actRecord{
            margin-top: 36px;
            width: 140px;
            height: 22px;
            font-size: 22px;
            font-family: PingFang SC;
            color: #333333;

        }
        .checkBox {
            display: flex;
            margin-top: 20px;

            > * {
                margin-right: 22px;
            }

            .el-input, .el-select {
                width: 308px;
            }
        }

        .el-pagination {
            padding-left: 77px;
            margin-top: 54px;

            /deep/ .el-pagination__total {
                margin-right: 280px;
            }
        }

        /deep/ .el-button--warning {
            background: #ffb040;
            border-color: #ffb040;
        }

        /deep/ .el-button--danger {
            background: #f97979;
            border-color: #f97979;
        }

        /deep/ .el-button--primary {
            background: #409eff;
            border-color: #409eff;
        }

        /deep/ .el-button--success {
            background: #2ab37b;
            border-color: #2ab37b;
        }

        /deep/ .el-button--info {
            background: #a3a3a3;
            border-color: #a3a3a3;
        }

        /deep/ .el-dialog {
            width: 616px;
            padding: 0 100px;

            .el-dialog__header {
                text-align: center;

                .el-dialog__title {
                    font-size: 20px;
                    color: #333;
                }
            }

            .el-dialog__body {
                color: #333;
                font-size: 16px;
            }

            .el-row {
                margin-bottom: 15px;
            }
        }

    }

</style>
